import React from 'react';
import ReactDOM from 'react-dom';
/* 
  this.forceUpdate()  强制组件更新的一个api; 类似于vue的$forceUpdate



  挂在阶段
  更新阶段
  卸载

  
*/
class App extends React.Component {
  // shouldComponentUpdate 优化钩子
  // componentDidMount 类似于vue的mounted
  state = {
    age: 6
  }
  // static getDerivedStateFromProps(newProps, newState) {
  //   // 这个钩子在加载和更新阶段都会执行
  //   // 他的返回值 最终会被合并到当前组件的state中
  //   console.log(newProps, newState)
  //   return {
  //     ...newProps
  //   }
  // }
  // componentWillMount() {
  //   // UNSAFE_componentWillMount()
  //   // 类似于vue的beforemount 不能跟getDerivedStateFromProps同时存在
  //   // 已经被废弃
  // }
  shouldComponentUpdate(newProps, newState) {
    // 这个函数是用来控制当前组件是否能够更新的一个钩子
    // 返回值是true则本组件可以更新 false不更新
    // 父组件更新 那么所有的后代组件都会更新
    // 这里 我们一般会使用 this.props 和newProps 进行对比 
    // 来决定是否更新当前组件this.props对应的是老的 属性；
    //                      newProps 对应的是新的属性；
    return true
  }
  // componentDidUpdate() 类似于vue的 updated
  // UNSAFE_componentWillUpdate() 类似于vue的 beforeUpdate
  // UNSAFE_componentWillReceiveProps()
  // componentWillUnmount() 类似于vue的 beforeDestroy


  // 常用的shouldComponentUpdate   componentDidMount componentWillUnmount
  // PureComponent  Component的区别  useEffect
  //  memo usememo usecallback  自定义hook



  render() {
    console.log(this.state)
    return <div className=''>
      <h1>{this.state.age}</h1>
      <button onClick={() => { this.setState({ age: this.state.age + 1 }) }}>+</button>
    </div>;
  }
}

ReactDOM.render(<App qqq="123" />, document.getElementById('root'))